<template>
  <div class="person-selector">
    <!-- <operation-bar @cancel="handleCancel" @confirm="handleConfirm" @search="handleSearch" /> -->
    <div class="main-content">
      <org-tree @node-click="handleNodeClick" @refresh="handleTreeRefresh" />
      <div class="right-panel">
        <user-table
          ref="userTableRef"
          :current-page="currentPage"
          :data="tableData"
          :loading="loading"
          :page-size="pageSize"
          :total="total"
          @page-change="handlePageChange"
          @select-user="handleSelectUser"
          @selection-change="handleSelectionChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import OrgTree from './OrgTree.vue'
import UserTable from './UserTable.vue'
import type { User, UserTableInstance } from './types'
import request from '/@/utils/request'

const emit = defineEmits(['confirm', 'cancel', 'selection-change'])
const fields = ref([
  {
    label: '人员',
    prop: 'name',
    type: 'input',
  },
])
// 组件引用
const userTableRef = ref<UserTableInstance>()

// 数据状态
const tableData = ref<User[]>([])
const selectedUsers = ref<User[]>([])
const currentDepartment = ref('')
const currentDepartmentId = ref('')
const searchKeyword = ref('')
const loading = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)

// 加载用户数据
const loadUserData = async (params: any = {}) => {
  loading.value = true

  try {
    console.log('正在加载用户数据，参数:', params)

    const response = await request({
      url: '/api/user',
      method: 'get',
      params: {
        page: params.page || 1,
        limit: params.pageSize || 10,
        name: params.username || '',
        mobile: params.mobile || '',
        deptId: params.deptId || '',
        isExternal: 'isExternal' in params ? params.isExternal : currentDepartment.value === '外部人员' ? 2 : 1, // 平台归属1:红有，2:本系统
      },
    })

    // 正确处理响应数据
    const data = response.data || response
    console.log('用户数据加载结果:', data)

    if (data.code === 0 && data.result) {
      // 转换API返回的用户数据为组件所需格式
      tableData.value = (data.result.rows || []).map((user: any) => ({
        id: user.id || user.userId,
        name: user.name || user.userName || '未命名',
        username: user.username || '-',
        mobile: user.mobile || '-',
        deptId: user.deptId,
        userId: user.userId,
        phone: user.phone || user.mobile,
      }))

      console.log('转换后的用户数据:', tableData.value)

      // 更新总数
      total.value = data.result.count || 0

      // 重新设置已选用户的表格选中状态
      // 延迟执行以确保表格已渲染
      setTimeout(() => {
        const selectedIds = selectedUsers.value.map((u) => u.id)
        console.log('重新设置选中状态, 已选用户IDs:', selectedIds)

        selectedUsers.value.forEach((user) => {
          const rowIndex = tableData.value.findIndex((item) => item.id === user.id)
          if (rowIndex !== -1) {
            userTableRef.value?.toggleRowSelection(tableData.value[rowIndex], true)
          }
        })
      }, 100)
    } else {
      console.error('加载用户数据失败:', data)
      tableData.value = []
      total.value = 0
    }
  } catch (error) {
    console.error('加载用户数据出错:', error)
    tableData.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

// 事件处理
const handleSearch = (keyword: string) => {
  searchKeyword.value = keyword
  currentPage.value = 1 // 重置到第一页

  // 加载搜索结果
  loadUserData({
    page: currentPage.value,
    pageSize: pageSize.value,
    deptId: currentDepartmentId.value,
    keyword,
    isExternal: currentDepartment.value === '外部人员' ? 2 : 1, // 平台归属1:红有，2:本系统
  })
}

const handleNodeClick = (data: any) => {
  // 保存部门信息
  currentDepartment.value = data.name

  // 判断是否点击了外部人员分类节点
  const isExternalCategory = data.isExternal && data.hasChildren

  console.log('选中节点类型:', {
    name: data.name,
    id: data.id,
    departmentsId: data.departmentsId,
    isExternal: data.isExternal,
    hasChildren: data.hasChildren,
    isExternalCategory,
  })

  // 根据节点类型确定要使用的ID
  if (data.isExternal) {
    // 外部人员节点：移除'ext-'前缀获取原始ID
    const originalId = data.id.toString().startsWith('ext-') ? data.id.toString().replace('ext-', '') : data.id
    currentDepartmentId.value = originalId
  } else {
    // 内部人员节点：优先使用departmentsId，如果不存在则使用id
    currentDepartmentId.value = data.departmentsId || data.id
  }

  currentPage.value = 1 // 重置到第一页

  console.log('选中部门:', {
    name: data.name,
    id: data.id,
    departmentsId: data.departmentsId,
    isExternal: data.isExternal,
    处理后ID: currentDepartmentId.value,
  })

  // 特殊处理：如果是外部人员分类节点并且有children，需要特殊处理
  if (isExternalCategory && data.rawData && Array.isArray(data.rawData.children)) {
    console.log('处理外部人员分类节点的用户数据:', data.rawData)

    try {
      // 创建表格用户数据
      const userData = data.rawData.children.map((child: any) => ({
        id: child.id,
        name: child.name,
        department: data.name, // 使用当前节点名称作为部门
        position: '',
        email: '',
        mobile: child.mobile || '',
        // 其他可能需要的字段
      }))

      console.log('处理后的外部分类用户数据:', userData)

      // 直接更新表格数据
      tableData.value = userData
      total.value = userData.length

      // 重新设置已选用户的表格选中状态
      setTimeout(() => {
        const selectedIds = selectedUsers.value.map((u) => u.id)
        console.log('重新设置选中状态, 已选用户IDs:', selectedIds)

        selectedUsers.value.forEach((user) => {
          const rowIndex = tableData.value.findIndex((item) => item.id === user.id)
          if (rowIndex !== -1) {
            userTableRef.value?.toggleRowSelection(tableData.value[rowIndex], true)
          }
        })
      }, 100)

      // 不再调用API加载用户
      return
    } catch (error) {
      console.error('处理外部人员分类节点数据出错:', error)
      // 出错时继续使用正常API加载方式
    }
  }

  // 对于内部部门和没有特殊处理的外部节点，使用标准API加载
  loadUserData({
    page: currentPage.value,
    pageSize: pageSize.value,
    deptId: currentDepartmentId.value,
    isExternal: data.isExternal ? 2 : 1, // 平台归属1:红有，2:本系统
  })
}

const handleTreeRefresh = () => {
  // 重置当前选中的部门
  currentDepartment.value = ''
  currentDepartmentId.value = ''
  currentPage.value = 1

  // 重新加载用户数据
  loadUserData({
    page: currentPage.value,
    pageSize: pageSize.value,
    isExternal: 1, // 默认显示内部人员，平台归属1:红有
  })
}

// 表格选择变化 - 仅用于当前页的选择状态
const handleSelectionChange = (selection: User[]) => {
  // 这里不直接设置 selectedUsers，而是处理当前页的选择状态
  // 当前页已选的用户 ID 集合
  const currentPageSelectedIds = new Set(selection.map((user) => user.id))

  // 过滤掉当前页中取消选择的用户
  selectedUsers.value = selectedUsers.value.filter((user) => {
    // 如果用户不在当前页中，保留
    const isInCurrentPage = tableData.value.some((item) => item.id === user.id)
    // 如果在当前页中，且被选中，则保留
    return !isInCurrentPage || currentPageSelectedIds.has(user.id)
  })

  // 添加当前页新选中的用户
  selection.forEach((user) => {
    if (!selectedUsers.value.some((item) => item.id === user.id)) {
      selectedUsers.value.push(user)
    }
  })

  // 通知父组件选择变化
  emit('selection-change', selectedUsers.value)
}

// 分页处理
const handlePageChange = ({ page, pageSize: size, ...rest }: { page: number; pageSize: number; [key: string]: any }) => {
  currentPage.value = page
  pageSize.value = size

  // 加载新页数据
  loadUserData({
    page,
    pageSize: size,
    deptId: currentDepartmentId.value,
    ...rest,
    keyword: searchKeyword.value,
    isExternal: currentDepartment.value === '外部人员' ? 2 : 1, // 平台归属1:红有，2:本系统
  })
}

// 直接添加用户
const handleSelectUser = (user: User) => {
  if (!selectedUsers.value.some((item) => item.id === user.id)) {
    selectedUsers.value.push(user)
    emit('selection-change', selectedUsers.value)
  }
}

// 移除用户（供父组件调用）
const removeUser = (userId: string) => {
  selectedUsers.value = selectedUsers.value.filter((item) => item.id !== userId)

  // 如果用户在当前页中，同步取消表格中的选择状态
  if (tableData.value.some((item) => item.id === userId)) {
    userTableRef.value?.unselectRow(userId)
  }

  emit('selection-change', selectedUsers.value)
}

// 清空所有已选用户
const clearSelection = () => {
  selectedUsers.value = []
  userTableRef.value?.clearSelection()
  emit('selection-change', selectedUsers.value)
}

// 确认选择
const handleConfirm = () => {
  // 将选中的用户传递给父组件
  emit('confirm', selectedUsers.value)
}

// 取消选择
const handleCancel = () => {
  // 通知父组件取消操作
  emit('cancel')
}

// 暴露方法给父组件
defineExpose({
  getSelectedUsers: () => selectedUsers.value,
  clearSelection,
  removeUser,
})

// 初始化
onMounted(() => {
  // 加载初始数据
  loadUserData({
    page: currentPage.value,
    pageSize: pageSize.value,
    isExternal: 1, // 默认加载内部人员，平台归属1:红有
  })
})
</script>

<style scoped>
.person-selector {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
</style>
